<template>
  <div class="add-task">
    任务名称：<input type="text" v-model="editTask.name" class="add__task__input"><br><br>
    任务等级：<select v-model="editTask.rank" class="add__task__select">
    <option value="rank-1">很重要-很紧急</option>
    <option value="rank-2">重要-不紧急</option>
    <option value="rank-3">不重要-紧急</option>
    <option value="rank-4">不重要-不紧急</option>
  </select><br><br>
    开始时间：
    <el-date-picker
    :value="startDate"
    size="mini"
    type="date"
    placeholder="选择日期"
    @input="(value)=>{
        editTask.startDate = value.getTime()
        editTask.endDate = value.getTime()
      }">
  </el-date-picker><br><br>
    结束时间：
    <el-date-picker
    :value="endDate"
    size="mini"
    type="date"
    placeholder="选择日期"
    @input="(value)=>{
        editTask.startDate = value.getTime()
        editTask.endDate = value.getTime()
      }">
  </el-date-picker><br><br>
    <div class="text-center">
      <button type="button" class="todo__btn" @click="addTask">添加</button>
      <button type="button" class="todo__btn" @click="getAllTask">刷新</button>
    </div>
    <!--<div v-for="task in taskList" :key="task.id">-->
    <!--<select v-model="task.rank" disabled>-->
    <!--<option value="rank-1">很重要-很紧急</option>-->
    <!--<option value="rank-2">重要-不紧急</option>-->
    <!--<option value="rank-3">不重要-紧急</option>-->
    <!--<option value="rank-4">不重要-不紧急</option>-->
    <!--</select><br>-->
    <!--{{task.name}} ：{{new Date(task.startDate).toLocaleDateString()}} 至 {{new Date(task.endDate).toLocaleDateString()}}-->
    <!--</div>-->
  </div>
</template>

<script>
import Task from '@/core/Task.js'
import db from '@/core/db.js'
import bus from '@/core/bus.js'

export default {
  name: 'AddTask',
  data () {
    return {
      editTask: new Task('新任务'),
      taskList: []
    }
  },
  computed: {
    startDate () {
      return new Date(this.editTask.startDate)
    },
    endDate () {
      return new Date(this.editTask.endDate)
    }
  },
  methods: {
    getAllTask () {
      db.Task.toArray(tasks => {
        tasks.forEach(task => {
          task.init(true)
        })
        this.taskList = tasks
      })
    },
    addTask () {
      this.editTask.save().then(() => {
        bus.$emit('update')
        this.editTask = new Task('新任务')
      })
    }
  },
  mounted () {
    this.getAllTask()
    bus.$on('update', () => {
      this.getAllTask()
    })
  }
}
</script>

<style lang="stylus">
  .add-task
    .add__task__input
      width: 220px
      -webkit-appearance: none
      background-color: #fff
      background-image: none
      border-radius: 4px
      border: 1px solid #dcdfe6
      -webkit-box-sizing: border-box
      box-sizing: border-box
      color: #606266
      display: inline-block
      font-size: inherit
      height: 28px
      line-height: 28px
      outline: 0
      padding: 0 15px
    .add__task__select
      width: 220px;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 28px;
      line-height: 28px;
      outline: 0;
      padding: 0 15px;
</style>
